<template>
	<view class="age-body">
		<view class="head">
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class="back">
				<image src="/static/fanhui-black.png" mode=""></image>
			</view>
			<text>时代筛选</text>
		</view>
		<view class="level-area"  @touchmove.stop.prevent="moveHandle">
			<!-- <view class="level-btn-l" v-if="!firstLevel" @click="levelBtn">
				<img src="/static/jiantou.png" > 
			</view> -->
			<view class="level-list">
				<scroll-view class="scroll-view_H"  scroll-x="true" @scroll="scroll" :scroll-left="scrollLeft">
				    <view  class="scroll-view-item_H " :class="item.id == listIndex ? 'scroll-view-item_H-ac':''" @click="chooseLv(item.id)" v-for="(item,index) in listData" :key='index'>{{item.level}}</view>
				</scroll-view>
			</view>
			<!-- <view class="level-btn-r" v-if="firstLevel" @click="levelBtn"> -->
			<view class="level-btn-r" @click="goRight" >
				<img src="/static/jiantou.png" > 
			</view>
		</view>
		<view class="menu">
			<view class="left-menu">
				
			</view>
			<view class="right-menu">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
				listData:[
					{
						level:'地质时代',
						id:1,
						nextData:[
							{
							level:'一级分类',
							data:[
								{
									type:'全部',
									id:1
								},
								{
									type:'冥古宙',
									id:1
								},
								{
									type:'全部',
									id:1
								},
								{
									type:'全部',
									id:1
								},
							]
							},
						]
					},
					{
						level:'远古时代',
						id:2,
					},
					{
						level:'奴隶社会',
						id:3,
					},
					{
						level:'封建社会',
						id:4,
					},
					{
						level:'近代史',
						id:5,
					}
				],
				listIndex:1
			}
		},
		methods:{
			chooseLv(id){
				this.listIndex = id
			}
		}
	}
</script>

<style scoped>
	.age-body{
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.head{
		width: 100%;
		background: #FFFFFF;
		border-bottom: #F2F2F2 solid 1upx;
		display: table;
		height: auto;
	}
	.back{
		width: 80upx;
		height: 80upx;
		float: left;
	}
	.back image{
		width: 30upx;
		height: 30upx;
		margin-top: 25upx;
		margin-left: 25upx;
	}
	.head text{
		float: left;
		line-height: 80upx;
		font-size: 30upx;
		margin-left: 30upx;
	}
	.level-area{
		width: 100%;
		height: 84upx;
		
	}
	.level-list{
		width: 670upx;
		height: 84upx;
		 overflow-y: auto;
		display: flex;
		flex-direction: row;
		float: left;
	}
	.level-item{
		width: 33.33%;
		text-align: center;
		
	}
	.level-item text{
		font-size: 25upx;
		color: #333333;
	}
	.active-span text{
		color: #0075EE;
		font-weight: bold;
		font-size: 28upx;
	}
	.level-btn-l{
		width: 8%;
		float: left;
		height: 100%;
		text-align: center;
		border-right: 2px rgb(230,225,225,0.28) inset ;
		/* background: #2C405A; */
	}
	.level-btn-l img{
		width: 32upx;
		height: 32upx;
		margin-top: 10upx;
		transform: rotate(180deg);
	}
	.level-btn-r{
		width: 74upx;
		float: right;
		height: 100%;
		text-align: center;
		border-left: 2px rgb(230,225,225,0.28) inset ;
		/* background: #2C405A; */
	}
	.level-btn-r img{
		width: 32upx;
		height: 32upx;
		margin-top: 30upx;
	}
	
	.scroll-view_H {
		/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
		white-space: nowrap;
		height: 84upx;
		width: 100%;
		
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 150upx;
		height: 84upx;
		color: #333333;
		line-height: 84upx;
		text-align: center;
		font-size: 30upx;
		margin-top: 0;
		margin-left: 25upx;
		margin-right: 25upx;
	}
	.scroll-view-item_H-ac{
		color: #55A0FF;
		font-size: 32upx;
	}
	.scroll-view-item_H view{
		box-sizing: border-box;
	}
	.menu{
		width: 750upx;
		height: 100vh;
	}
	.left-menu{
		background: #F2F2F2;
		float: left;
		height: 100%;
		width: 170upx;
	}
	.right-menu{
		width: 580upx;
		height: 100%;
		background: #FFFFFF;
		float: left;
	}
</style>
